<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #container{
			width: 80%;
			height: 600px;
			border: 2px solid red;
			background: #000;
			margin:20px auto;
			position: relative;
			overflow: hidden;
		}
		.fire{
			width: 10px;
			height: 10px;
			position: absolute;
		}
		.small-fire{
			width: 10px;
			height:10px;
			position: absolute;
			border-radius: 50%;
		}
    </style>
</head>
<body>
    <div id="container"></div>
</body>
<script src="../move.js"></script>
<script>

    // 烟花的触发方式：事件触发，自动触发

    // OOA：烟花
    // 创建元素
    // 设置初始样式
    // 开始运动
    // 运动到目标位置
    // 删除，选择性的继续创建

    // OOD
    // function Fire(ops){}
    // Fire.prototype.xxx = function(){}
    // new Fire({type, now, target})

    // OOP
    function Fire(ops={}){
        // 1. 接收并处理默认：参数决定了功能
        this.type = ops.type || 0;
        this.now = ops.now || {};
        this.target = ops.target || {};
        this.cont = ops.cont || null;

        // 2. 创建元素
        this.createEle();
        // 4. 开始运动
        this.move();
    }
    Fire.prototype.createEle = function(){
        // 3. 设置初始样式
        this.div = document.createElement("div");
        this.div.className = "fire";
        this.div.style.left = this.now.x + "px";
        this.div.style.top = this.now.y + "px";
        this.div.style.background = randomColor();
        this.cont.appendChild(this.div);
    }
    Fire.prototype.move = function(){
        // 运动
        move(this.div, {
            top: this.target.y,
            left: this.target.x
        }, ()=>{
            // 运动到目标位置
            // 删除
            this.div.remove();
            // 选择性的继续创建
            if(this.type === 0){
                for(let i=0;i<random(500,501);i++){  
                    new Fire({
                        cont: this.cont,
                        type: 1,
                        now:{
                            x: this.target.x,
                            y: this.target.y
                        },
                        target:{
                            x: random(0, this.cont.offsetWidth-this.div.offsetWidth),
                            y: random(0, this.cont.offsetHeight-this.div.offsetHeight)
                        }
                    })
                }
            }
        })
    }

    const ocont = document.getElementById("container");
    
    // 触发方式
    ocont.onclick = function(eve){
        const e = eve || window.event;
        new Fire({
            cont: ocont,
            type:0,
            now:{
                x: e.offsetX, y: ocont.offsetHeight-10
            },
            target:{
                x: e.offsetX, y: e.offsetY
            }
        })
    }



    function randomColor(){
        return `rgb(${random(150,255)},${random(150,255)},${random(150,255)})`;
    }
    function random(max,min){
        return Math.round(Math.random()*(max-min)+min);
    }


</script>
</html>